<template>
  <div>
    <span style="font-size: 30px">链轮设计工具</span>

    <!-- 链号与中心距 -->
    <el-form label-position="left" :inline="true" label-width="70px">
      <el-form-item label="链号">
        <el-select size="small" v-model="chainNumber">
          <el-option v-for="item in chainNumberOption" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label-width="60px" label="中心距">
        <el-select size="small" style="width: 90px" v-model="centerDis">
          <el-option v-for="item in centerDisOption" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input size="small" style="width: 100px" v-model="centerDistance"></el-input>
      </el-form-item>
    </el-form>

    <!-- 链板厚度与销轴长度 -->
    <el-form label-position="left" :inline="true" label-width="70px">
      <el-form-item label="链板厚度">
        <el-form-item label-width="50px">
          <el-input size="small" style="width: 100px" v-model="thickness"></el-input>
        </el-form-item>
      </el-form-item>

      <el-form-item label-width="60px" label="销轴长度">
        <el-input size="small" style="width: 100px" v-model="pinLength"></el-input>
      </el-form-item>
    </el-form>

    <el-button type="primary" :disabled="loading" @click="createChain">生成链条</el-button>

  </div>
</template>

<script>
import {chainGenerator} from "../../design/ChainGenerator";
import {chainData, RollerChain} from "../../domain/RollerChain";

export default {
  name: 'RollerChain',
  data() {
    return {
      loading: true,
      // 链号
      chainNumber: '24A',
      chainNumberOption: [],

      // 理论中心距
      centerDis: '30p',
      centerDisOption: ['30p'],

      // 实际中心距
      centerDistance: 0,

      // 链板厚度 t
      thickness: 5.12,
      // 销轴长度 l
      pinLength: 50.82,
    };
  },
  mounted() {
    chainGenerator.init(() => {
      this.loading = false;
    });
    this.chainNumberOption.push(...chainData.map(data => data.id));
  },
  methods: {
    createChain() {
      this.loading = true;
      const param = chainData.find(data => data.id === this.chainNumber);
      if (param) {
        const rollerChain = new RollerChain(param.p, param.d1, param.b1, param.h2, param.d2, this.thickness, this.pinLength);
        chainGenerator.createRollerChain(rollerChain, () => {
          this.loading = false;
        });
      } else {
        this.loading = false;
      }
    },

  },
};
</script>

<style scoped>
.outsize {
    padding: 2px 4px;
}

.imageStyle {
    height: 100px;
    width: 100px;
}

>>> .el-input {
    width: 100px;
}

</style>
